<template>
    <div>
        <div>
            <el-form :inline="true" label-width="100" :model="formInline"  class="demo-form-inline">
                <el-form-item label="图号：">
                    <el-input class="input-width" v-model="formInline.itemCode" size="mini" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="质量编号：">
                    <el-input class="input-width" v-model="formInline.qualityCode" size="mini" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="AO编号：">
                    <el-input class="input-width" v-model="formInline.aoNo" size="mini" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="合格证号：">
                    <el-input class="input-width" v-model="formInline.hgzNo" size="mini" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="台账ID：">
                    <el-input class="input-width" v-model="formInline.wmsItemInventoryId" size="mini" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="占用ID：">
                    <el-input class="input-width" v-model="formInline.allotId" size="mini" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="出入库类型：">
                    <el-select v-model="formInline.outInStatus" size="mini">
                        <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="流水状态：">
                    <el-select v-model="formInline.invTransactStatus" size="mini">
                        <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="出入库时间:">
                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.startTime" size="mini" type="date" placeholder="开始日期"></el-date-picker>到
                    <el-date-picker style="width:140px" value-format="yyyy-MM-dd" v-model="formInline.endTime" size="mini" type="date" placeholder="结束日期"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="mini" @click="doQuery">查询</el-button>
                    <el-button type="primary" size="mini" @click="doReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="im-hq-topTable">
            <el-table  ref="multipleTable"  size="mini" :data="tableData"  style="width: 100%"  @selection-change="handleSelectionChange" height="500">
                <el-table-column type="selection" width="40"> </el-table-column>
                <el-table-column prop="ROW_ID" label="序号" width="50" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="wmsItemInventoryId" label="台账ID" v-if="false" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="itemCode" label="图号" width="160" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="qualityCode" label="质量编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="aoNo" label="AO编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="attribute3Desc" label="合格证号" width="70" :show-overflow-tooltip="true"> </el-table-column>
                
                <el-table-column prop="startLotNo" label="架次" width="160" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="attribute6" label="出库数量" width="160" :show-overflow-tooltip="true"> </el-table-column>

                <el-table-column prop="attribute20" label="占用ID" width="160" :show-overflow-tooltip="true"> </el-table-column>

                <el-table-column prop="attribute1Desc" label="出库类型" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="invTransactStatus" label="流水状态" width="70" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="attribute2Desc" label="流水来源" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="creationDate" label="创建时间" :show-overflow-tooltip="true"> </el-table-column>
                
            </el-table>
            <!-- 分页 -->
            <el-pagination  
            @size-change="handleSizeChange"  
            @current-change="handleCurrentChange"  
            :current-page="page.currentPage"  
            :page-sizes="[10,20,50,100,500]"
            :page-size="page.pageSize"  layout="total, sizes, prev, pager, next, jumper"  
            :total="page.total">
            </el-pagination>
        </div>
    </div>
  </template>
  <script>
  import request from "@/utils/request.js";
  export default {
    name: "outInFlowQuery",
    data() {
      return {
        formInline:{
            itemCode:"",
            qualityCode:"",
            aoNo:"",
            hgzNo:"",
            outInStatus:"",
            invTransactStatus:"",
            startTime:"",
            endTime:"",
            wmsItemInventoryId:"",
            allotId:""
        },
        options1:[
            {
                value: "OUT",
                label: "出库",
            },
            {
                value: "IN",
                label: "入库",
            },
        ],
        options2:[
            {
                value: "4",
                label: "撤销",
            },
            {
                value: "1",
                label: "正常",
            },
        ],
        page:{
            total:0,
            pageSize:50,
            currentPage:1
        },
        tableData:[],
      };
    },
    methods:{
        handleSelectionChange(){

        },
        handleSizeChange(val){
            this.page.pageSize = val;
            this.$options.methods.doQuery.bind(this)();
        },
        handleCurrentChange(val){
            this.page.currentPage = val;
            this.$options.methods.doQuery.bind(this)();
        },
        doQuery(){  
            request.post("/wmsItemTransaction/outInFlowQuery",{"page":this.page,"queryParam":this.formInline}).then((res)=>{
                console.log(res);
                this.tableData = res.data.list;
                // that.tableData = res.data.responseBody.list;
                this.page.total = res.data.total;
            });
        },
        doReset(){
            Object.assign(this.formInline,this.$options.data().formInline);
        }
    }
  };
  </script>
  <style scoped>
  .el-select {
    width: 140px;
  }
  .el-input {
    width: 140px;
  }
  .im-hq-topInput {
    overflow: hidden;
  }
  .im-hq-topInputList {
    text-align: center;
  }
  .im-hq-topInput ul li {
    float: left;
    width: 23%;
    height: 30px;
    line-height: 30px;
    margin-right: 1%;
    margin-bottom: 5px;
  }
  .im-hq-topInput ul li span {
    float: right;
  }
  .im-hq-topInput ul li div {
    float: right;
  }
  </style>